<template>
	<view class="page">
		<u-sticky :offsetTop="0">
			<view class="head-tabs">
				<view class="tabs-wrap-2">
					<u-tabs :current="tabCurrent" :scrollable="false" :list="tabList" @click="tabClick" keyName="title"
						lineColor="#CB0011" :lineWidth="28" :lineHeight="2"
						:itemStyle="{height: '50px',fontSize: '28rpx',color:'#666666'}"
						:activeStyle="{fontWeight: 'bold',color: '#000000' }"
						:inactiveStyle="{color: '#9695A3',fontWeight:'400',fontSize:'28rpx' }"></u-tabs>
					</u-tabs>
				</view>
			</view>
		</u-sticky>



		<view class="page-ctx">
			<view class="view-wrap">
				<view class="refund-view">
					<view class="order-wrap">
						<view class="order-list">
							<view class="item" v-for="(item,index) in allow_refund_list" :key="index">
								<view class="item-top flex-between">
									<text class="order-sn">订单号：{{item.orderNo || item.sn}}</text>
									<text class="status">{{item.statusInfo || ''}}</text>
								</view>

								<view class="item-center" @click="toDetail(item)">
									<view class="products-wrap">
										<view class="product-list">
											<view class="product-item flex" v-for="(product_item, product_index) in  item.products_arr">
												<view class="poster-box">
													<image :src="product_item.image" mode=""></image>
												</view>
												<view class="info">
													<view class="title-box">
														<view class="title">
															{{product_item.title}}
														</view>
													</view>
													<view class="desc-box">
														<view class="desc ellipsis-1">
															{{product_item.remark || ''}}
														</view>
													</view>

													<view class="desc-box">
														<view class="desc ellipsis-1">
															{{product_item.keyVals }}
														</view>
													</view>

													<view class="price-box flex-between">
														<view class="price-info">
															<text class="huobi">￥</text>
															<text class="price">{{product_item.priceSale || 0}}</text>
															<text class="unit" v-if="product_item.unit">/{{product_item.unit}}</text>
														</view>
														<text class="num">x {{product_item.num}}</text>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="item-bottom ">
									<!-- <view class="total-box ">
										<view class="price">
											合计金额：￥{{item.price}}
										</view>
									</view> -->
									<view class="btns flex">
										<view v-if="tabSelect.value == 1 || tabSelect.value == 2" class="btn fit-text btn-detail"
											@click="toDetail(item)">
											服务单详情
										</view>
										<view v-if="item.is_allow_refund" class="btn fit-text btn-pay" @click="toRefund(item)">
											申请售后
										</view>

										<view v-if="item.ifCancel == 1" class="btn fit-text btn-pay" @click="doCancel(item)">
											取消售后
										</view>
										<view v-if="item.ifExpress == 1" class="btn fit-text btn-pay" @click="openExpress(item)">
											邮寄回平台
										</view>
										<view v-if="item.ifReceive == 1" class="btn fit-text btn-pay" @click="qrShouHuo(item,index)">
											确认收货
										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="load-more-wrap" style="margin-top: 40rpx;">
							<u-loadmore :status="loadmore_status" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<w_bottom_safe height="40" />


		<refund_cancel_pop data-title="售后取消" ref="refund_cancel_pop" @confirm="update_refund_info" />
		<refund_add_express_pop data-title="售后退回物流" ref="refund_add_express_pop" @confirm="confirmExpress" />
	</view>
</template>

<script>
	import refund_cancel_pop from '@/components/refund/refund_cancel_pop.vue'
	import refund_add_express_pop from '@/components/refund/refund_add_express_pop.vue'
	export default {
		components: {
			refund_cancel_pop,
			refund_add_express_pop
		},
		data() {
			return {
				show_refund: false, //订单 售后切换

				showExpressCompany: false, //填写快递信息
				//
				orders: [],
				order_select: {}, //
				count: 0,
				pagination: {
					page: 1,
					pageNum: 10
				},
				loadmore_status: 'loadmore', //loadmore  / loading / nomore


				// 售后相关
				allow_refund_list: [], //允许售后列表
				tabCurrent: 0,
				tabSelect: {
					title: '申请售后',
					value: 0,
					status: '',
				},
				tabList: [{
						title: '申请售后',
						value: 0,
						status: '',
					},
					{
						title: '处理中',
						value: 1,
						status: 0,
					},
					{
						title: '已完成',
						value: 2,
						status: 1,
					},
					{
						title: '已驳回',
						value: 3,
						status: -1,
					},
				],
			}
		},
		computed: {

		},
		filters: {

		},
		onLoad(option) {

		},
		onShow() {
			this.initQuery();
			this.setView();
		},
		onHide() {},
		onPullDownRefresh() {

		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			loadMore() {
				if (this.loadmore_status == 'loadmore') {
					this.loadmore_status = 'loading'
					this.pagination.page++;
					this.query_order();
				}
			},
			initQuery() {
				this.allow_refund_list = [];
				this.pagination.page = 1;
				this.loadmore_status = 'loadmore'
			},
			setView() {
				this.query_order()
			},

			query_order() {
				if (this.tabSelect.value == 0) {
					//可售后列表
					this.query_allow_refund_list();
				} else {
					//售后服务列表
					this.query_refund_service_list();
				}
			},
			//可售后列表
			query_allow_refund_list() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'refund_afterSaleList',
						...this.pagination,
					},
				}).then(res => {
					if (res.code == 200) {
						this.count = res.data.count;
						let list = res.data.list || [];

						this.format_refund_view_info(list)

						this.allow_refund_list = this.allow_refund_list.concat(list);
						this.loadmore_status = res.data.count > this.allow_refund_list.length ? 'loadmore' : 'nomore';
						this.$log('可售后列表', this.allow_refund_list)
					}
				})
			},

			//format_order_view_info
			format_refund_view_info(list) {
				list.forEach(v => {
					v.products_arr = [v.products]
					// let status = v.status;
					// let status_info = v.status_info;
					v.is_allow_refund = v.ifRefund == 0 //
				})
			},
			toRefund(item) {
				this.toRoute({
					path: '/refund-type',
					query: {
						orderId: item.orderId,
						inventoryId: item.inventoryId
					}
				})
			},

			//售后服务列表
			query_refund_service_list() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'refund_lists',
						...this.pagination,
						status: this.tabSelect.status, //当前状态(0待处理 1已完成 )
					},
				}).then(res => {
					if (res.code == 200) {
						this.count = res.data.count;
						// res.data.forEach(v => {
						// 	// v.count_down_pay_end_time = v.pay_end_time > 0 ? v.pay_end_time * 1000 : 0
						// 	this.handleOrderActions(v)
						// })
						this.allow_refund_list = res.data.list
						this.format_refund_view_info(res.data.list)

						this.orders = this.orders.concat(res.data);
						this.loadmore_status = res.data.count > this.orders.length ? 'loadmore' : 'nomore';
					}
				})
			},
			tabClick(item) {
				this.tabSelect = item
				this.initQuery()
				this.setView()
			},


			doCancel(item) {
				this.$refs.refund_cancel_pop.init(item)
			},


			openExpress(item) {
				this.$refs.refund_add_express_pop.init(item)
			},
			confirmExpress() {
				this.initQuery()
				this.setView()
			},




			qrShouHuo(item, index) {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'refund_qrShouHuo',
						id: item.id
					},
				}).then(res => {
					this.$alert(res)
					if (res.code == 200) {
						this.initQuery()
						this.setView()
					}
				})
			},


			toDetail(item) {
				if (this.tabSelect.value == 0) { //订单详情
					this.toRoute({
						path: '/order-detail',
						query: {
							id: item.orderId,
						}
					})
				} else { //服务单详情
					this.toRoute({
						path: '/refund-service-detail',
						query: {
							id: item.id,
							type: item.type
						}
					})
				}
			},


			// 更新订单信息
			update_refund_info(id) {
				this.initQuery()
				this.setView()


				// 	let index = this.orders.findIndex(v => v.id == id)
				// 	let item = this.orders[index];


				// 	if (this.tabSelect.value != 0) { //不是全部订单
				// 		this.orders.splice(index, 1)
				// 		return
				// 	}

				// 	this.$api({
				// 		url: '/service.php',
				// 		method: 'get',
				// 		data: {
				// 			action: 'orders_detail',
				// 			id: id
				// 		},
				// 	}).then(res => {
				// 		if (res.code == 200) {
				// 			let data = res.data;

				// 			let new_item = {
				// 				...item,
				// 				ifCancel: data.ifCancel,
				// 				ifComment: data.ifComment,
				// 				ifCommented: data.ifCommented,
				// 				ifDel: data.ifDel,
				// 				ifHx: data.ifHx,
				// 				ifPay: data.ifPay,
				// 				ifReceive: data.ifReceive,
				// 				orderStatus: data.orderStatus,
				// 				statusInfo: data.statusInfo,
				// 			}

				// 			this.orders.splice(index, 1, new_item)
				// 		}
				// 	})
			}



		}
	}
</script>
<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	// ::v-deep .tabs-wrap .u-tabs__wrapper__nav__item {
	// 	padding: 0 8rpx;
	// }
	.page {
		.page-ctx {
			padding: 24rpx 32rpx;
		}
	}

	.head-tabs {
		// position: fixed;
		// z-index: 10;
		// top: 0;
		// left: 0;
		// right: 0;
		background: #fff;
	}


	.tabs-wrap {
		padding-top: 0;
		box-shadow: 0rpx -10rpx 10rpx 1rpx rgba(0, 0, 0, 0.08);
		background: #F6F6F6;
		background: #FFF;
		border-bottom: 1rpx solid #eee;


		.tabs {
			.tab-item {
				height: 100rpx;
				line-height: 100rpx;
				position: relative;
				// padding: 25rpx 0;
				text-align: center;
				flex: 1;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;

				&.active {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;


					&::after {
						content: '';

						position: absolute;
						z-index: 2;
						bottom: 0;
						left: 50%;
						transform: translate(-50%);
						width: 40rpx;
						height: 6rpx;
						background: #44C4BE;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
					}
				}
			}
		}
	}






	.order-wrap {
		.order-list {
			.item {
				margin-bottom: 24rpx;
				background: #FFFFFF;
				// box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				padding: 32rpx 24rpx;
				margin-bottom: 20rpx;
				background: #FFFFFF;


				.item-top {
					padding: 0 0;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;

					.order-sn {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #B3B9C9;
					}

					.status {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FF0000;
					}
				}

				.item-center {
					// border-top: 1rpx solid #eee;
				}

				.item-bottom {
					// border-top: 1rpx solid #eee;
					// padding: 20rpx 0;


					.total-box {
						text-align: right;

						.price {
							text-align: right;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}
					}

					.btns {
						margin-top: 30rpx;
						flex: 1;
						justify-content: flex-end;
						overflow: hidden;
						flex-wrap: wrap;

						.btn {
							margin-left: 20rpx;
							padding: 0 24rpx;
							min-width: 146rpx;
							height: 64rpx;
							background: #F8F8F8;
							border-radius: 40rpx 40rpx 40rpx 40rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;

							&.btn-detail {}

							&.btn-pay {
								background: #CB0011;
								color: #FFFFFF;
							}

							&.btn-reviews {}

							&.btn-cancel {}
						}
					}
				}
			}
		}



		.products-wrap {
			padding: 0 0;

			.product-list {
				.product-item {
					padding: 32rpx 0;

					&+.product-item {
						border-top: 1rpx solid #eee;
					}

					.poster-box {
						width: 176rpx;
						height: 176rpx;
						border-radius: 8rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.info {
						flex: 1;
						overflow: hidden;
						padding-left: 32rpx;



						.title-box {}

						.title {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #222222;
							line-height: 1.5;
						}

						.desc-box {
							margin-top: 14rpx;

							.desc {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #B3B9C9;
							}
						}


						.price-box {
							margin-top: 24rpx;

							.price-info {
								.huobi {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 20rpx;
									color: #000000;
								}

								.price {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 28rpx;
									color: #000000;
								}

								.unit {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 20rpx;
									color: #000000;
								}
							}

							.num {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 28rpx;
								color: #000000;
							}

						}
					}
				}

			}

		}
	}
</style>